import QtQuick 1.0
import com.nokia.meego 1.0

Item {
    id: root
    anchors.fill: parent

    property bool shift: shiftButton.checked

    signal keyEvent(string event);
    signal returnEvent();
    signal backspaceEvent();

    function createQmlObjectFromFile(file, properties, parent) {
        var qmlComponent = Qt.createComponent(file)
        if (qmlComponent.status == Component.Ready) {
            return qmlComponent.createObject(parent ? parent : this, properties ? properties : {})
        }
        console.log(qmlComponent.errorString())
        return null
    }

    function createKeys(characters, alternatives, parent) {
        for (var i = 0; i < characters.length; ++i) {
            var object = createQmlObjectFromFile("Key.qml", {keyboard: root, character: characters[i], alternative: alternatives[i]}, parent);
        }
    }

    function buildKeyboard() {
        createKeys(['0','1','2','3','4','5','6','7','8','9'], [], row0)
        createKeys(['q','w','e','r','t','y','u','i','o','p'], ['Q','W','E','R','T','Y','U','I','O','P'], row1)
        createKeys(['a','s','d','f','g','h','j','k','l'], ['A','S','D','F','G','H','J','K','L'], row2)
        createKeys(['z','x','c','v','b','n','m'], ['Z','X','C','V','B','N','M'], row3)
    }

    Column {
        id: layout
        spacing: 6
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 6
        width: parent.width

        Row {
            id: row0
            anchors.horizontalCenter: parent.horizontalCenter
            height: 60
        }
        Row {
            id: row1
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Row {
            id: row2
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Item {
            width: parent.width
            height: childrenRect.height
            Key {
                iconSource: "image://theme/icon-m-toolbar-backspace"
                onClicked: root.backspaceEvent()
                width: 100
                anchors.right: parent.right
            }
            Row {
                id: row3
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
        Item {
            width: parent.width
            height: childrenRect.height

            Key {
                id: shiftButton
                iconSource: "image://theme/icon-m-toolbar-up"
                checked: false
                checkable: true
                width: 120
                anchors.left: parent.left
            }
            Key {
                character: ":"
                alternative: "_"
                keyboard: root
                anchors.right: comma.left
            }
            Key {
                id: comma
                character: ","
                alternative: "-"
                keyboard: root
                anchors.right: space.left
            }
            Key {
                id: space
                character: " "
                keyboard: root
                width: 250
                anchors.horizontalCenter: parent.horizontalCenter
            }
            Key {
                id: dot
                character: "."
                alternative: ":"
                keyboard: root
                anchors.left: space.right
            }
            Key {
                id: mail
                character: "@"
                alternative: "/"
                keyboard: root
                anchors.left: dot.right
            }
            Key {
                id: enter
                iconSource: "image://theme/icon-m-toolbar-done"
                onClicked: root.returnEvent()
                width: 120
                anchors.right: parent.right
            }
        }
    }

    Component.onCompleted: {
        root.buildKeyboard();
    }
}
